@{block #content}

    <h1>{$title}</h1>

    <p><a href="{link ModulesManagement:default}" class="button ui-state-default ui-corner-all"><span class="ui-icon ui-icon-carat-1-w floatLeft">&nbsp;</span>&nbsp;{!_"Back to Modules Management"}</a></p>

    <div id="consoleWindow">
        <div id="processedQuery">
            {snippet console}
            {!= (isset($console) ? $console : "")}
            {/snippet}
        </div>
        <div id="consoleInput">
            {$form}
        </div>
    </div>


    <script type="text/javascript">
        var queryHistory = [];
        var maxPosition = 0;
        var position = 1;

        function callConsole() {
            $.getJSON(
            {link process!},
            { query: $("#frmconsole-albireoConsole").val() },
            function (payload) {
                $("#processedQuery").append('<hr />'+payload.snippets["snippet--console"]);
                $('#consoleWindow').animate({ scrollTop: '+=' + $('#consoleWindow')[0].scrollHeight + 'px' }, 1000);
            }
        );
            maxPosition = queryHistory.push($("#frmconsole-albireoConsole").val()) - 1 ;
            position = maxPosition + 1;
            $('#frmconsole-albireoConsole').val('');
            return false;
        }

        function showHistory(key) {
            if(key == '38' &&  position > 0) {
                position--;
                $("#frmconsole-albireoConsole").val(queryHistory[position]);
                $("#frmconsole-albireoConsole").focus();
            } else if(key == '40'){
                if(position < maxPosition) {
                    position++;
                    $("#frmconsole-albireoConsole").val(queryHistory[position]);
                    $("#frmconsole-albireoConsole").focus();
                } else if(position == maxPosition){
                    position++;
                    $("#frmconsole-albireoConsole").val('');
                    $("#frmconsole-albireoConsole").focus();
                }
            }
        }


        $(document).ready(function(){
            {if isset($queries)}
            queryHistory = {$queries};
            maxPosition = {$queries}.length - 1;
            position = {$queries}.length;
            {/if}
            var consoleTextarea = $("#frmconsole-albireoConsole");
            consoleTextarea.focus();
            $("#frmconsole-process").click(callConsole);
            consoleTextarea.focus();
            var originalConsoleInputHeight = consoleTextarea.height();
            var shadowConsole = $('<div></div>').css({
                position: 'absolute',
                left: -5000,
                width: "600px",
                fontSize: consoleTextarea.css('fontSize'),
                fontFamily: consoleTextarea.css('fontFamily'),
                lineHeight: consoleTextarea.css('lineHeight'),
                resize: 'none'
            }).appendTo($("body"));

            consoleTextarea.keyup(function(event) {
                var times = function(string, number) {
                    for (var i = 0, r = ''; i < number; i ++) r += string;
                    return r;
                };
                shadowConsole.html(consoleTextarea.val().replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/&/g, '&amp;').replace(/\n$/, '<br/>&nbsp;').replace(/\n/g, '<br/>').replace(/ {!="{2,}"}/g, function(space) { return times('&nbsp;', space.length -1) + ' ' }));
                consoleTextarea.height(shadowConsole.height() + originalConsoleInputHeight);
                if (event.keyCode == '13') {
                    if (consoleTextarea.val().trim().substr(-1,1)==';') {
                        event.preventDefault();
                        callConsole();
                        consoleTextarea.height(originalConsoleInputHeight);
                        shadowConsole.val("");
                        //$('#frmconsole-albireoConsole').val('');//clears the text area after calling console
                    }
                }
                if (event.keyCode == '38' || event.keyCode == '40') {
                    event.preventDefault();
                    showHistory(event.keyCode);
                }
            });

        });
    </script>

{/block}